import React, {useState,} from 'react'
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
import {Icon, List, WingBlank} from "antd-mobile"
import {onSelected} from "../../../../utils/commonfunc";
import CustomButton from "../../../../shared-components/CustomButton/CustomBotton";
const Item = List.Item

const data = [
    {title: '640', active: false,},
    {title: '800', active: false,},
    {title: '1024 (推荐)', active: true,},
    {title: '1120', active: false,},
    {title: '1280', active: false,},
    {title: '1440', active: false,},
    {title: '1600', active: false,},
    {title: '1760', active: false,},
    {title: '1920', active: false,},
    {title: '2240', active: false,},
]


const LiveDataRate = props => {
    const {history,} = props
    const [dataRate, setDateRate,] = useState(data)
    const dataRateItemClick = selectedItem => {
        onSelected(selectedItem, dataRate, 'title', 'active', setDateRate,)
    }


    const optionList = (dataRate.map((item, index) => (
        <Item
            key={index}
            extra={item.active ? <Icon type='check' color='#FA7268'/> : null}
            onClick={(e) => dataRateItemClick(item)}
        >
            {item.title}
        </Item>
    )))

    const btns = (
        <WingBlank>
            <div className='flex-space-between mg-t-4'>
                <CustomButton
                    inline='true'
                    color='#333'
                    bg='#fff'
                    extrastyle={{width: '49%'}}
                >取消</CustomButton>
                <CustomButton
                    inline='true'
                    extrastyle={{width: '49%'}}
                    shadow='0px 6px 10px 0px rgba(250,114,104,0.4)'
                >完成</CustomButton>
            </div>

        </WingBlank>

    )

    return <GoBackLayout
        history={history}
        title='码率设置'
    >
        {optionList}
        {btns}
    </GoBackLayout>
}

export default LiveDataRate
